<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放心购-产品精选</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <script>

        $(function () {
           /* var search = location.search;
            //alert(search);//?id=5
            // 切割字符串，拿到第二个值
            var cid = search.split("=")[1];*/
           //获取cid的参数值
           var cid = getParameter("cid");
            //获取rname的参数值
            var rname = getParameter("rname");
            //判断rname如果不为null或者""
            if(rname){
                //url解码
                rname = window.decodeURIComponent(rname);
            }

            //当页码加载完成后，调用load方法，发送ajax请求加载数据
            load(cid,null,rname);
        });

        function load(cid ,currentPage,rname){
            //发送ajax请求，请求route/pageQuery,传递cid
            $.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
                //解析pagebean数据，展示到页面上

                //1.分页工具条数据展示
                //1.1 展示总页码和总记录数
                $("#totalPage").html(pb.totalPage);
                $("#totalCount").html(pb.totalCount);

                /*
                        <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li class="curPage"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>


                 */
                var lis = "";

                var fristPage = '<li onclick="javascipt:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';

                //计算上一页的页码
                var beforeNum =  pb.currentPage - 1;
                if(beforeNum <= 0){
                    beforeNum = 1;
                }

                var beforePage = '<li  onclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

                lis += fristPage;
                lis += beforePage;
                //1.2 展示分页页码
                /*
                    1.一共展示10个页码，能够达到前5后4的效果
                    2.如果前边不够5个，后边补齐10个
                    3.如果后边不足4个，前边补齐10个
                */

                // 定义开始位置begin,结束位置 end
                var begin; // 开始位置
                var end ; //  结束位置


                //1.要显示10个页码
                if(pb.totalPage < 10){
                    //总页码不够10页

                    begin = 1;
                    end = pb.totalPage;
                }else{
                    //总页码超过10页

                    begin = pb.currentPage - 5 ;
                    end = pb.currentPage + 4 ;

                    //2.如果前边不够5个，后边补齐10个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }

                    //3.如果后边不足4个，前边补齐10个
                    if(end > pb.totalPage){
                        end = pb.totalPage;
                        begin = end - 9 ;
                    }
                }


                for (var i = begin; i <= end ; i++) {
                    var li;
                    //判断当前页码是否等于i
                    if(pb.currentPage == i){

                        li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';

                    }else{
                        //创建页码的li
                        li = '<li onclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }





               /* for (var i = 1; i <= pb.totalPage ; i++) {
                    var li;
                    //判断当前页码是否等于i
                    if(pb.currentPage == i){

                        li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';

                    }else{
                        //创建页码的li
                        li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }*/
                var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';

                lis += nextPage;
                lis += lastPage;


                //将lis内容设置到 ul
                $("#pageNum").html(lis);



                /*
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>299</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>

                 */

                //2.列表数据展示
                var route_lis = "";

                for (var i = 0; i < pb.list.length; i++) {
                    //获取{rid:1,rname:"xxx"}
                    var route = pb.list[i];

                    var li = '<li>\n' +
                        '                        <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +
                        '                        <div class="text1">\n' +
                        '                            <p>'+route.rname+'</p>\n' +
                        '                            <br/>\n' +
                        '                            <p>'+route.routeIntroduce+'</p>\n' +
                        '                        </div>\n' +
                        '                        <div class="price">\n' +
                        '                            <p class="price_num">\n' +
                        '                                <span>&yen;</span>\n' +
                        '                                <span>'+route.price+'</span>\n' +
                        '                                <span>起</span>\n' +
                        '                            </p>\n' +
                        '                            <p><a href="route_detail.html?rid='+route.rid+'">查看详情</a></p>\n' +
                        '                        </div>\n' +
                        '                    </li>';
                    route_lis += li;
                }
                $("#route").html(route_lis);

                //定位到页面顶部
                window.scrollTo(0,0);
            });

        }


    </script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="page_one">
    <div class="contant">
        <div class="crumbs">
            <img src="images/search.png" alt="">
            <p> <a href="index.html">首页></a> <span>产品精选</span></p>
        </div>
        <hr style="border: #ffc900 1px solid">
        <div class="xinxi clearfix">
            <div class="left">
                <div class="header">
                    <span>商品信息</span>
                    <span class="jg">价格</span>
                </div>
                <ul id="route">
                    <li>
                        <div class="img"><img src="images/p1.jpg" alt=""></div>
                        <div class="text1">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <br/>
                            <p>鲜奶工艺流程：收奶→标准化→分离→杀菌→凝乳→压榨→盐浴→成品</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>55</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/p2.jpg" alt=""></div>
                        <div class="text1">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <br/>
                            <p>鲜奶工艺流程：收奶→标准化→分离→杀菌→凝乳→压榨→盐浴→成品</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>66</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/p6.png" alt=""></div>
                        <div class="text1">
                            <p>【益生菌】发酵提高免疫力</p>
                            <br/>
                            <p>酸奶生产工艺：牛奶→标准化→调配→杀菌均质→发酵→冷却→灌装→冷藏</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>99</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/p4.jpg" alt=""></div>
                        <div class="text1">
                            <p>【益生菌】发酵提高免疫力</p>
                            <br/>
                            <p>酸奶生产工艺：牛奶→标准化→调配→杀菌均质→发酵→冷却→灌装→冷藏</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>99</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/p5.jpg" alt=""></div>
                        <div class="text1">
                            <p>【益生菌】发酵提高免疫力</p>
                            <br/>
                            <p>酸奶生产工艺：牛奶→标准化→调配→杀菌均质→发酵→冷却→灌装→冷藏</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>99</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/p3.jpg" alt=""></div>
                        <div class="text1">
                            <p>【益生菌】发酵提高免疫力</p>
                            <br/>
                            <p>酸奶生产工艺：牛奶→标准化→调配→杀菌均质→发酵→冷却→灌装→冷藏</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>40</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/p7.jpg" alt=""></div>
                        <div class="text1">
                            <p>【益生菌】发酵提高免疫力</p>
                            <br/>
                            <p>酸奶生产工艺：牛奶→标准化→调配→杀菌均质→发酵→冷却→灌装→冷藏</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>999999</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                </ul>
                <div class="page_num_inf">
                    <i></i> 共
                    <span id="totalPage">12</span>页<span id="totalCount">132</span>条
                </div>
                <div class="pageNum">
                    <ul id="pageNum">
                        <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li class="curPage"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="hot">HOT</div>
                    <span>热门推荐</span>
                </div>
                <ul>
                    <li>
                        <div class="left"><img src="images/p8.jpg" alt=""></div>
                        <div class="right">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <p>网付价<span>&yen;<span>99</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/p7.jpg" alt=""></div>
                        <div class="right">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <p>网付价<span>&yen;<span>99</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/p6.png" alt=""></div>
                        <div class="right">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <p>网付价<span>&yen;<span>99</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/p3.jpg" alt=""></div>
                        <div class="right">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <p>网付价<span>&yen;<span>99</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/p2.jpg" alt=""></div>
                        <div class="right">
                            <p>【鲜赏奶系列】,巴氏杀菌,220g</p>
                            <p>网付价<span>&yen;<span>99</span>起</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<script>
    importHeader();//导入公共头部
    importFooter();//导入公共尾部
</script>
</body>

</html>